<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form :form="form" style="padding: 10px;">
                    <a-form-item style="display:none">
                        <a-input v-decorator="['id']"/>
                    </a-form-item>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapper-col="{ span: 12 }" :label="i18n('form.name','名称')">
                                <a-input :placeholder="i18n('form.name','名称')" v-decorator="['name', {rules: [{required: true, message: i18n('form.name','名称','input')}]}]"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapper-col="{ span: 12 }" :label="i18n('form.key','编码')">
                                <a-input :placeholder="i18n('form.key','编码')" v-decorator="['key', {rules: [{required: true, message: i18n('form.key','编码','input')}]}]"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.isSys','是否系统')">
                                <rx-checkbox :false-value="0"
                                             :true-value="1"
                                             :value="mdl.isSys"
                                             v-decorator="['isSys']">{{i18n('isSysMap.yes','是否系统')}}</rx-checkbox>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.status','状态')">
                                <rx-checkbox :false-value="0"
                                             :true-value="1"
                                             :value="mdl.status"
                                             v-decorator="['status']">{{i18n('statusMap.startUsing','状态')}}</rx-checkbox>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.tempType','类型')">
                                <a-radio-group v-model="mdl.tempType"
                                               v-decorator="['tempType', {rules: [{required: true, message: i18n('form.tempType','类型','input')}]}]">
                                    <a-radio v-for="item in tempTypeList"
                                             :value="item.value"
                                             :key="item.value"
                                    >{{item.label}}</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" >
                            <a-form-item :labelCol="labelCol1" :wrapper-col="{ span: 19 }" :label="i18n('form.templet','模板')" v-show="mdl.tempType!='VueBel'">
                                <div style="height: 300px;padding-right: 3px;box-sizing: border-box;width: 100%;">
                                    <rx-monaco-editor  ref="monacoes"
                                                       :language="monacoeLanguage"
                                                       style="box-sizing: border-box;"
                                                       v-model="templet">
                                    </rx-monaco-editor>
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </rx-layout>

    </rx-dialog>

</template>
<script>
    import InsColumnTempApi from '@/api/portal/core/insColumnTemp';

    import {BaseForm, RxDialog, RxCheckbox,RxMonacoEditor} from "@lowcode/jpaas-common-lib";




    export default {
        name: 'InsColumnTempEdit',
        mixins: [BaseForm],
        data() {
            return {
                templet: "",
                monacoeLanguage:"html",
                indeterminate: true,
                checkAll: false,
                tempTypeList: [],
                endScript: "",
            }
        },
        components: {
            RxDialog,'rx-checkbox': RxCheckbox,RxMonacoEditor
        },
        created(){
            this.getTempTypeList()
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"insColumnTemp",key);
            },
            getTempTypeList(){
                var self=this;
                InsColumnTempApi.getTempTypeList().then(res =>{
                    var list = res.data;
                    for(var key in list){
                        var temp = list[key];
                        self.tempTypeList.push({label: temp, value: key});
                    }
                });
            },
            get(id) {
                return InsColumnTempApi.get(id);
            },
            onload_(data){
                if(data && data.templet){
                    this.templet=data.templet;
                }
            },
            save(values) {
                if(!values.isSys){
                    values.isSys="0";
                }
                if(!values.status ){
                    values.status="0";
                }
                values.templet = this.templet;
                return InsColumnTempApi.save(values);
            }

        }
    }
</script>
<style>

</style>
